<template>
  <div>
    <div class="bgimg">
        <!-- 此处添加日期选择 -->
      <div id="dateselecter">
          <div id="dateselecterNumber" @click="openSelect">
              <span v-text="whichDayselected"></span>
          </div>
        </div>

      <div id="content_mian">
        <div id="preColor">
          <div id="fillcolor">
          <div id="content_white">
            <h2 class="title" v-html="getdata.TipsTitle"></h2>
            <!-- 正文 -->
            <p v-html="getdata.Tips"></p>
            <div class="fgx" v-if="getdata.Tips!=null"></div>
            <div class="todaymenu" v-if="getdata.todayMenu!=null">
              <!-- 今日菜单 -->
              <div class="todatmenutitle">今日菜单</div>
              <div class="todayimg">
                <hr class="titlehr">
                <img class="iconclass" src="https://i.loli.net/2018/06/21/5b2b8f2851611.gif">
              </div>
              <div class="todaymenucontent">
                <!-- 早餐 -->
                <div v-if="getdata.todayMenu.BraekFist!=null">
                  <span>早餐：</span><span v-text="getdata.todayMenu.BraekFist"></span><br>
                </div>
                <!-- 中餐 -->
                <div v-if="getdata.todayMenu.Lunch!=null">
                  <span>午餐：</span><span v-text="getdata.todayMenu.Lunch"></span><br>
                </div>
                <!-- 日间加餐 -->
                <div v-if="getdata.todayMenu.Day_snack!=null">
                  <span>日间加餐：</span><span v-text="getdata.todayMenu.Day_snack"></span><br>
                </div>
                <!-- 晚餐 -->
                <div v-if="getdata.todayMenu.Dinner!=null">
                  <span>晚餐：</span><span v-text="getdata.todayMenu.Dinner"></span><br>
                </div>
                <!-- 晚餐加餐 -->
                <div v-if="getdata.todayMenu.Dinner_Snack!=null">
                  <span>晚餐加餐：</span><span v-text="getdata.todayMenu.Dinner_Snack"></span><br>
                </div>
              </div>
            <div class="fgx" v-if="getdata.todayMenu!=null"></div>
            </div>


            <div class="todaymenu" v-if="getdata.ReList!=0">
              <!-- 推荐菜谱css套用今日菜单 -->
              <div class="todatmenutitle">推荐菜谱</div>
              <div class="todayimg">
                <hr class="titlehr">
                <img class="iconclass" src="https://i.loli.net/2018/06/21/5b2b8f2851611.gif">
              </div>
              <div class="todaymenucontent">
                <ul>
                  <li v-for="(item,index) of getdata.ReList" :key="index">
                    <img class="insertpic" v-if="item.ImgAddress!=''" :src="item.ImgAddress"><br>
                    <h2 class="title" v-text="item.HowToDoTitle"></h2>
                    <p v-html="item.HowToDoThis"></p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="bottonheight"></div>

        </div>
      
        </div>
        </div>
      </div>
    </div>
    <div :class="useAnimate?'SelectItemsPickerDiv animated bounceInUp':'SelectItemsPickerDiv animated bounceOutDown'" v-if="isShowDiv" >
      <div class="DatePickTitle">
        <div class="DatePickClosePic" style="float:left">
          <!-- 占位填充 -->
        </div>
        <span>产后/天</span>
        <div class="DatePickClosePic" @click="HideSelect">
          确定
        </div>
      </div>
      <div class="DateNumberSelectDiv">
        <selectbox :numb="item" :selecteditenNumber="whichDayselected"  v-for="(item,index) in 42" :key="index"  @GetChildreninfo="GetNumb" ></selectbox>
      </div>
    </div>
  </div>
</template>

<script>
import selectbox from '@/components/SelectBox'
export default {
  data: function () {
    return {
      whichDayselected: '',
      getdata: [],
      isShowDiv: false,
      useAnimate: false,
      TempSelectNumber: ''
    }
  },
  components: {
    selectbox
  },
  mounted: function () {
    this.whichDayselected = this.$root.$mp.query['days']
    this.getContent()
  },
  methods: {
    getContent: function () {
      var _this = this
      wx.request({
        url:
          'https://localhost:8084/api/GetContent?dayNumb=' + this.whichDayselected, // localhost换为自己的api即可
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          // console.log(res.data)
          // console.log(_this.getdata)
          // _this.getdata = res.data.Tips
          _this.getdata = res.data
        }
      })
    },
    openSelect: function () {
      this.isShowDiv = true
      this.useAnimate = true
    },
    HideSelect: function () {
      this.useAnimate = false
      setTimeout(() => {
        this.isShowDiv = false
      }, 500)
    },
    GetNumb: function (numb) {
      this.whichDayselected = numb
    }
  },
  computed: {
    getNewDayInfo: function () {
      this.getContent()
    }
  }
}
</script>
<style lang="stylus"  scoped>
body {
  background-color: #66ccff;
}

.title {
  font-weight: bold;
  line-height: 3;
}

p {
  text-indent: 60rpx;
}

.fgx {
  background-image: Url('https://i.loli.net/2018/06/21/5b2b811c50214.gif');
  background-size: contain;
  height: 200rpx;
  background-repeat: no-repeat;
  margin-left: -33rpx;
  margin-right: -33rpx;
}

.bgimg {
  height: 100%;
  background-image: Url('https://i.loli.net/2018/06/21/5b2a893f48251.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

#content_mian {
  padding-top: 70rpx;
  overflow-x: hidden;
  height: 100%;
}

#preColor {
  background-color: #b3e4fc;
  margin-top: -10rpx;
  min-height: 1025rpx;
}

#fillcolor {
  background-color: #b3e4fc;
}

#content_white {
  margin-right: 19rpx;
  margin-left: 19rpx;
  background-color: white;
  padding-left: 15rpx;
  padding-right: 10rpx;
  font-size: 30rpx;
  line-height: 1.8;
}

.todaymenu {
}

.todayimg {
  text-align: center;
}

.todatmenutitle {
  text-align: center;
  font-size: 35rpx;
  font-family: '微软雅黑';
}

.iconclass {
  height: 100rpx;
  width: 330rpx;
}

.insertpic {
  width: 99%;
  padding-left: 5rpx;
  padding-right: 5rpx;
  margin-top 20rpx;
}

.bottonheight {
  height: 70rpx;
}

.SelectItemsPickerDiv {
  height: 900rpx;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  width: 750rpx;
  background-color: white;
  box-shadow: 1px 1px 5px #2f2f2f;
}

.DatePickTitle {
  height: 100rpx;
  width: 100%;
  text-align: center;
  font-weight: 500;
  line-height: 2.4;
}

.DatePickClosePic {
  float: right; // 设置右边的，左边的填充直接用style覆盖
  height: 100rpx;
  width: 100rpx;
  text-align: center;
  line-height: 2.4;
  color: #ddb147;
}

.DateNumberSelectDiv {
  height: 650rpx;
  width: 100%;
  margin-left: 25prx;
  margin-right: 25rpx;
}

#dateselecter {
  height: 80rpx;
  padding-top: 70rpx;
}

#dateselecterNumber {
  height: 80rpx;
  width: 80rpx;
  margin: 0rpx auto;
  font-size: 70rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ddb147;
}

.ClickedThisItem{
  border-radius 50%;
  background-color #66ccff
}
</style>

